<template>
	<view class="container">
		<view class="top">
			<view class="tdmc u-m-l-30">
				<text>团队名称</text>
				<text class="right">专业桥梁设计小分队</text>
			</view>
			<view class="tdmc u-m-l-30">
				<text>团队类型</text>
				<text class="right">智汇工程</text>
			</view>
			<view class="tdmc u-m-l-30">
				<text>擅长领域</text>
				<text class="right">桥梁设计</text>
			</view>
			<view class="tdmc u-m-l-30">
				<text>保证金金额</text>
				<text class="jine">￥12000</text>
			</view>
			<view class="fgx">
				
			</view>
		</view>
		<view class="u-m-l-30 u-m-t-30">
			<view class="u-flex u-row-between tdcy">
				<view class="u-font-30" style="font-weight: bold;">
					团队成员
				</view>
				<view class="u-flex u-row-center">
					<text class="u-font-30" style="color: #AB61FF;">10个</text>
					<image @click="toTeamMembers" style="width: 48rpx; height: 48rpx;" src="../../../static/img/xx.png"></image>
				</view>
			</view>
			<view class="f-list u-border-bottom u-flex u-m-r-20 u-m-b-20 u-m-t-28" v-for="(item, index) in list" :key="index">
				<view class="qylg" :style="{ backgroundImage: 'url(' + bjxm + ')' }">
					<text>{{item.logo}}</text>
				</view>
				<view class="f-item u-m-l-32">
					<view class="title u-flex u-m-t-12">
						<view class="">
							<text class="name">{{ item.name }}</text>
							<text v-if="item.leader" class="tz">团长</text>
						</view>
						<view class="bzj">
							<text>￥5000</text>
						</view>
					</view>
					<view class="explain u-m-t-25">未交保证金</view>
				</view>
			</view>
			<view class="ckqb">
				<text>查看全部</text>
				<image style="height: 14rpx; width: 14rpx;" src="../../../static/img/cxx.png" mode=""></image>
			</view>
			<!-- <view class="u-flex u-row-between u-m-t-30 u-m-r-30">
				<view @click="tohomepage" class="xmkk" v-for="(item,index) in 5" :key="index" :style="{ backgroundImage: 'url(' + bjxm + ')' }">
					<text>姓名</text>
				</view>
			</view> -->
		</view>
		<view class="fgx u-m-t-28">
		</view>
		<view class="u-m-l-30 u-m-t-30">
			<view class="u-font-30 xmfp">项目分配</view>
			<view class="u-m-t-22"  v-for="(item,index) in 2" :key="index">
				<view class="xmfpxj">
					<view class="u-flex u-row-between u-m-l-30 u-p-t-20">
						<view class="tubiao u-flex">
							武汉三六长江大桥工程
							<image @click="toProjectAllocation" style="width: 48rpx; height: 48rpx;" src="../../../static/register/xy.png" mode=""></image>
						</view>
						<view class="">
							<image @click="toProjectAllocation" style="width: 48rpx; height: 48rpx;" src="../../../static/img/sz.png" mode=""></image>
						</view>
					</view>
					<view class="xhx">
					</view>
					<view class="f-list u-flex u-m-b-20 u-m-t-28" v-for="(item, index) in list" :key="index">
						<view class="qylg" :style="{ backgroundImage: 'url(' + bjxm + ')' }">
							<text>{{item.logo}}</text>
						</view>
						<view class="f-item u-m-l-32">
							<view class="title u-flex u-m-t-12">
								<view class="">
									<text class="name">{{ item.name }}</text>
									<text v-if="item.leader" class="tz">团长</text>
								</view>
								<view class="fpbl">
									<text>分配比例</text>
									<text class="fpblsz">15</text>
									<text class="bfh">%</text>
								</view>
							</view>
							<view class="explain u-m-t-25">{{ item.explain }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="caozuo u-flex u-row-around">
				<button class="baocun">保存</button>
				<button class="quxiao">取消</button>
			</view>
			<view class="ckqb">
				<text>收起</text>
				<image style="height: 14rpx; width: 24rpx;" src="../../../static/img/cxs.png" mode=""></image>
			</view>
		</view>
		<view class="xhx">
		</view>
		<view class="middle-tdxy">
			<view class=" u-flex u-row-between u-m-r-30 u-m-l-30 u-m-t-30">
				<view class="u-font-30 xmfp">团队协议</view>
				<view class="scxy">
					<image style="" src="../../../static/img/jh.png" mode=""></image>
					<text>上传协议</text>
				</view>
			</view>
			<view v-for="(item,index) in 1" :key="index" class="tdxy u-m-l-30 u-m-t-30">
				<view class="word u-m-l-30 u-p-t-30">
					<image src="../../../static/img/word.png" mode=""></image>
					<text>桥梁设计团队协议.doc</text>
				</view>
				<view class="sctime u-m-l-30 u-p-t-30">
					<text class="scsj">上传时间:</text>
					<text class="sctime">2020-06-01 16:24:18</text>
				</view>
			</view>
		</view>
		<view class="fgx u-m-t-30">
		</view>
		<view class="middle-hyjy  u-m-t-30">
			<view class=" u-flex u-row-between u-m-l-30 u-m-r-30 ">
				<view class="u-font-30 xmfp">会议纪要</view>
				<view @click="tonewSummary" class="scxy">
					<image style="" src="../../../static/img/jh.png" mode=""></image>
					<text>新增纪要</text>
				</view>
			</view>
			<view class="xhx">
			</view>
			<view class="u-m-l-30">
				<view class="u-flex u-m-t-35">
					<view class="ty">
					</view>
					<text class="xmjz">最新项目进展</text>
					<text class="sctime">2020-06-01 16:24:18</text>
				</view>
				<view class="u-flex">
					<view class="xx">
						
					</view>
					<view class="">
						<view class="zxjz">
							这是咱们项目的最新进展
						</view>
						<view class="u-flex">
							<view class="tp">
								
							</view>
							<view class="tp">
								
							</view>
						</view>
						<view class="u-m-l-30 u-m-t-20 u-flex">
							<view class="tyqk">
								团员确认情况
							</view>
							<view class="hekuai">
								8/12
							</view>
							<view >
								<image @click="toConfirmation" class="sd" src="../../../static/img/sd.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<view class="u-flex ">
					<view class="ty">
					</view>
					<text class="xmjz">上传团队协议</text>
					<text class="sctime">2020-06-01 16:24:18</text>
				</view>
				<view class="word u-m-l-40 u-p-t-30">
					<image src="../../../static/img/word.png" mode=""></image>
					<text>桥梁设计团队协议.doc</text>
				</view>
				<view class="u-m-l-30 u-m-t-20 u-flex">
					<view class="tyqk">
						团员确认情况
					</view>
					<view class="hekuai">
						8/12
					</view>
					<view >
						<image class="sd" src="../../../static/img/sd.png" mode=""></image>
					</view>
				</view>
				<view @click="toMinutesOfMeeting" class="ckqb">
					<text>查看全部</text>
					<image style="height: 30rpx; width: 30rpx;" src="../../../static/img/gd.png" mode=""></image>
				</view>
			</view>
			<view class="fgx u-m-t-30">
			</view>
		</view>
		<view class="u-m-l-30 u-m-t-30">
			<view class="u-flex u-row-between tdcy">
				<view class="u-font-30" style="font-weight: bold;">
					N+1企业
				</view>
				<view class="u-flex u-row-center">
					<text class="u-font-30" style="color: #AB61FF;">6个</text>
					<image style="width: 48rpx; height: 48rpx;" src="../../../static/register/xy.png"></image>
				</view>
			</view>
			<view class="u-flex u-row-between u-m-t-30">
				<view @click="toteamPage" class="qymc" v-for="(item,index) in 5" :key="index" :style="{ backgroundImage: 'url(' + bjxm + ')' }">
					<text >企业名称</text>
				</view>
			</view>
		</view>
		<view class="fgx u-m-t-30">
		</view>
		<view class="u-m-l-30 u-m-t-30 u-m-r-30 ">
			<view class="u-flex u-row-between tdcy">
				<view class="u-font-30" style="font-weight: bold;">
					文件
				</view>
				<view  class="sc">
					<image style="" src="../../../static/img/jh.png" mode=""></image>
					<text>上传</text>
				</view>
				<!-- <view class="u-flex u-row-center u-m-r-16">
					<image @click="toFile" style="width: 48rpx; height: 48rpx;" src="../../../static/register/xy.png"></image>
				</view> -->
			</view>
			
		</view>
		<view class="u-m-b-60">
			<view class="f-list u-flex " v-for="(item, index) in filelist" :key="index">
				<view class="qylg  u-m-t-36" >
					<image style="width: 64rpx; height: 64rpx;" src="../../../static/img/file.png" mode=""></image>
				</view>
				<view class="f-item ">
					<view class="u-font-34">
						{{item.system}}
					</view>
					<view class="title u-flex u-m-t-12">
							<text class="name">{{ item.name }}</text>
							<text class="rq">2020-06-01</text>
							<text class="wjdx">3.1M</text>
					</view>
				</view>
				<view class="xz">
					下载
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		
		data(){
			return{
				bjxm: "../../static/homepage/xmkk.png",
				filelist:[
					{
						system:'项目施工规章制度',
						name:'张三',
						logo:'姓名',
						leader: true
					},
					{
						system:'项目施工规章制度',
						name:'张三',
						logo:'姓名'
					},
					{
						system:'项目施工规章制度',
						name:'张三',
						logo:'姓名'
					},
					{
						system:'项目施工规章制度',
						name:'张三',
						logo:'姓名'
					}
					
				],
				list:[
					{
						name:'张三',
						logo:'姓名',
						explain:'能者多得',
						leader: true
					},
					{
						name:'张三',
						logo:'姓名',
						explain:'能者多得'
					},
					{
						name:'张三',
						logo:'姓名',
						explain:'能者多得'
					},
				]
			}
		},
		onLoad(options){
			
		},
		methods:{
			toTeamMembers(){
				uni.navigateTo({
					url:"../../notepad/zhihuiTeam/teamMembers"
				})
			},
			toProjectAllocation(){
				uni.navigateTo({
					url:"../../notepad/zhihuiTeam/projectAllocationDetails"
				})
			},
			tohomepage(){
				uni.navigateTo({
					url:"../../homepage/homepage"
				})
			},
			toteamPage(){
				uni.navigateTo({
					url:"../../homepage/teamPage"
				})
			},
			tonewSummary(){
				uni.navigateTo({
					url:"../../notepad/zhihuiTeam/newSummary"
				})
			},
			toConfirmation(item) {
				uni.navigateTo({
					url: '../../notepad/zhihuiTeam/confirmation?id='+item.id
				})
			},
			toMinutesOfMeeting(){
				uni.navigateTo({
					url:"../../notepad/zhihuiTeam/minutesOfMeeting"
				})
			},
			toFile(){
				uni.navigateTo({
					url:"../../notepad/zhihuiTeam/file"
				})
			}
		},
		
	}
</script>

<style scoped lang="scss">
	.tdmc{
		line-height: 100rpx;
		border-bottom: 2rpx solid #DADFED;
		width: 90%;
		margin-left: 5%;
		text{
			font-size: 30rpx;
			color: #0D1D36;
		}
		.right{
			position: absolute;
			left: 228rpx;
		}
		.jine{
			position: absolute;
			left: 228rpx;
			font-size: 30rpx;
			color: #AB61FF;
		}
	}
	.fgx{
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F9;
	}
	.xmkk{
		width: 102rpx;
		height: 118rpx;
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: 0 bottom;
		text{
			color: #888D99;
			font-size: 26rpx;
			line-height: 118rpx;
			margin-left: 27rpx;
		}
	}
	.xmfp{
		color: #0D1D36;
		font-weight: bold;
	}
	.xmfpxj{
		width: 690rpx;
		background: #F5F5F9;
		border-radius: 10rpx;
		.tubiao{
			color: #0D1D36;
			font-size: 30rpx;
		}
		.xhx{
			width: 100%;
			height: 1rpx;
			background-color: #CACEDB;
			margin-top: 20rpx;
		}
	}
	.qylg{
			width: 102rpx;
			height: 118rpx;
			background-size: 100% auto;
			background-position: 0 bottom;
			margin-left: 28rpx;
			margin-top: 15rpx;
			text{
				color: #888D99;
				font-size: 26rpx;
				line-height: 118rpx;
				margin-left: 27rpx;
			}
		}
		.title{
			display: flex;
			justify-content: space-between;
		}
		.tz{
			width: 68rpx; color: #FFFFFF; font-size: 24rpx;
			height: 36rpx;
			background: #AB61FF;
			border-radius: 6rpx;
			margin-left: 20rpx;
		}
		.name{
			font-size: 30rpx;
			color: #0D1D36;
			font-weight: bold;
		}
		.explain{
			color: #888D99;
			font-size: 26rpx;
		}
		.fpbl{
			position: absolute;
			left: 500rpx;
			text{
				font-size: 24rpx;
				color: #4B9CFF;
			}
			.fpblsz{
				width: 68rpx;
				height: 36rpx;
				border: 2rpx solid #4B9CFF;
				border-radius: 6rpx;
				margin-left: 10rpx;
			}
			.bfh{
				font-size: 24rpx;
				margin-left: 15rpx;
			}
		}
		.ckqb{
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			color: #FF8F28;
			margin-top: 30rpx;
		}
		.xhx{
			width: 100%;
			height: 2rpx;
			background-color: #DADFED;
			margin-top: 34rpx;
		}
		.scxy{
			display: flex;
			align-items: center;
			width: 190rpx;
			height: 52rpx;
			border: 2rpx solid #AB61FF;
			border-radius: 26rpx;
			color: #AB61FF;
			font-size: 26rpx;
			image{
				width: 30rpx; height: 30rpx;
				margin-top: 5rpx;
				margin-left: 26rpx;
			}
		}
		.tdxy{
			width: 690rpx;
			height: 159rpx;
			background: #F5F5F9;
			border-radius: 20rpx;
			.word{
				display: flex;
				align-items: center;
				image{
					width: 41rpx; height: 37rpx;
				}
				text{
					color: #4B9CFF;
					font-size: 30rpx;
					margin-left: 16rpx;
				}
			}
		}
		.scsj{
			color: #0D1D36;
			font-size: 26rpx;
		}
		.sctime{
			display: flex;
			align-items: center;
			color: #888D99;
			font-size: 30rpx;
			margin-left: 20rpx;
		}
		.ty{
			width: 18rpx;
			height: 18rpx;
			background: #888D99;
			border-radius: 50%;
		}
		.xmjz{
			color: #888D99;
			font-size: 30rpx;
			margin-left: 20rpx;
		}
		.xx{
			width: 2rpx;
			height: 468rpx;
			border: 2rpx dashed #888D99;
			opacity: 0.5;
			margin-left: 7rpx;
			margin-top: -10rpx;
		}
		.zxjz{
			color: #0D1D36;
			font-size: 30rpx;
			font-weight: bold;
			margin-left: 40rpx;
			margin-top: -100rpx;
		}
		.tp{
			width: 192rpx;
			height: 192rpx;
			border-radius: 10rpx;
			background-color: #F5F5F9;
			margin-left: 30rpx;
			margin-top: 24rpx;
		}
		.tyqk{
			color: #0D1D36;
			font-size: 26rpx;
		}
		.hekuai{
			color: #FFFFFF;
			font-size: 26rpx;
			width: 72rpx;
			height: 32rpx;
			background: #4F5A78;
			border-radius: 4rpx;
			text-align: center;
			line-height: 32rpx;
			margin-left: 22rpx;
		}
		.sd{
			width: 48rpx;
			height: 48rpx;
			margin-left: 341rpx;
		}
		.word{
			display: flex;
			align-items: center;
			image{
				width: 41rpx; height: 37rpx;
			}
			text{
				color: #4B9CFF;
				font-size: 30rpx;
				margin-left: 16rpx;
			}
		}
		.qymc{
			width: 102rpx;
			height: 118rpx;
			background-repeat: no-repeat;
			background-size: 100% auto;
			background-position: 0 bottom;
			text{
				color: #888D99;
				font-size: 20rpx;
				line-height: 118rpx;
				margin-left: 8rpx;
			}
		}
		.bzj{
			position: absolute;
			left: 550rpx;
			font-size: 36rpx;
			color: #FE5022;
		}
		.caozuo{
			width: 690rpx;
			height: 124rpx;
			background-color: #F5F5F9;
			margin-top: -10rpx;
			.baocun{
				width: 160rpx;
				height: 64rpx;
				background: #4B9CFF;
				border-radius: 10px;
				color: #FFFFFF;
				font-size: 30rpx;
				line-height: 64rpx;
			}
			.quxiao{
				width: 160rpx;
				height: 64rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				color: #888D99;
				font-size: 30rpx;
				line-height: 64rpx;
			}
		}
		.sc{
			display: flex;
			align-items: center;
			width: 136rpx;
			height: 52rpx;
			border: 2rpx solid #AB61FF;
			border-radius: 26rpx;
			color: #AB61FF;
			font-size: 26rpx;
			image{
				width: 30rpx; height: 30rpx;
				margin-top: 5rpx;
				margin-left: 26rpx;
			}
		}
		.f-list{
			
			border-bottom: 2rpx solid #DADFED;
			
		}
		.qylg{
				width: 102rpx;
				height: 118rpx;
				background-size: 100% auto;
				background-position: 0 bottom;
				margin-left: 28rpx;
				margin-top: 15rpx;
				text{
					color: #888D99;
					font-size: 26rpx;
					line-height: 118rpx;
					margin-left: 27rpx;
				}
			}
			.name{
				font-size: 28rpx;
				color: #4C9CFF;
			}
			.tz{
				width: 68rpx; color: #FFFFFF; font-size: 24rpx;
				height: 36rpx;
				background: #AB61FF;
				border-radius: 6rpx;
				margin-left: 20rpx;
			}
			.xz{
				width: 114rpx;
				height: 50rpx;
				background: #4C9CFF;
				border-radius: 25rpx;
				color: #FFFFFF;
				font-size: 26rpx;
				text-align: center;
				line-height: 50rpx;
				margin-left: 150rpx;
			}
			.rq{
				font-size: 28rpx;
				color: #888E9A;
				margin-left: 20rpx;
			}
			.wjdx{
				font-size: 28rpx;
				color: #888E9A;
				margin-left: 20rpx;
			}
</style>
